<template>
  <el-dialog
    v-model="visibility"
    width="65%"
    :title="config.button.text.view"
    append-to-body
    draggable
    :close-on-click-modal="false">
    <el-divider content-position="left">车次-基本信息</el-divider>
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item
        label="车次号"
        width="100px">
        {{ props.rowData.trainNumber }}
      </el-descriptions-item>
      <el-descriptions-item
        label="采购订单编号"
        width="100px">
        {{ props.rowData.purchaseOrderNumber }}
      </el-descriptions-item>
      <el-descriptions-item
        label="采购订单名称"
        width="100px">
        {{ props.rowData.purchaseOrderName }}
      </el-descriptions-item>
      <el-descriptions-item
        label="米厂简称"
        width="100px">
        {{ props.rowData.baseRiceBarnSimpleName }}
      </el-descriptions-item>
      <el-descriptions-item
        label="米厂商品简称"
        width="100px">
        {{ props.rowData.baseRiceBarnGoodsSimpleName }}
      </el-descriptions-item>
      <el-descriptions-item
        label="资金方简称"
        width="100px">
        {{ props.rowData.baseCapitalPartySimpleName }}
      </el-descriptions-item>
      <el-descriptions-item
        label="提货主体公司简称"
        width="100px">
        {{ props.rowData.baseCompanySimpleName }}
      </el-descriptions-item>
      <el-descriptions-item
        label="资金厂库简称"
        width="100px">
        {{ props.rowData.baseCapitalWarehouseName }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">车次-到货情况</el-divider>
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item
        label="发货吨数"
        width="100px">
        {{ props.rowData.sendTon }}
      </el-descriptions-item>
      <el-descriptions-item
        label="到货-完好吨数"
        width="100px">
        {{ props.rowData.arriveIntactTon }}
      </el-descriptions-item>
      <el-descriptions-item
        label="到货-破损吨数"
        width="100px">
        {{ props.rowData.arriveWornTon }}
      </el-descriptions-item>
      <el-descriptions-item
        label="实际米厂单价"
        width="100px">
        {{ props.rowData.realRiceFactoryUnitPrice }}
      </el-descriptions-item>
      <el-descriptions-item
        label="到货日期"
        width="100px">
        {{ formatDate(props.rowData.arriveDate) }}
      </el-descriptions-item>
      <el-descriptions-item
        label="是否到货"
        width="100px">
        {{ props.rowData.isArrive ? "是" : "否" }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">车次-提货情况</el-divider>
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item
        label="统计-已提完好吨数"
        width="100px">
        {{ props.rowData.pickIntactTon }}
      </el-descriptions-item>
      <el-descriptions-item
        label="统计-已提破损吨数"
        width="100px">
        {{ props.rowData.pickWornTon }}
      </el-descriptions-item>
      <el-descriptions-item
        label="统计-剩余完好吨数"
        width="100px">
        {{ props.rowData.residueIntactTon }}
      </el-descriptions-item>
      <el-descriptions-item
        label="统计-剩余破损吨数"
        width="100px">
        {{ props.rowData.residueWornTon }}
      </el-descriptions-item>
      <el-descriptions-item
        label="提货预计结束日期"
        width="100px">
        {{ formatDate(props.rowData.pickPredictFinishDate) }}
      </el-descriptions-item>
      <el-descriptions-item
        label="是否完成提货"
        width="100px">
        {{ props.rowData.isFinish ? "是" : "否" }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">车次-基础信息</el-divider>
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item
        label="创建人"
        width="100px">
        {{ props.rowData.createUserRealName }}
      </el-descriptions-item>
      <el-descriptions-item
        label="创建时间"
        width="100px">
        {{ formatDateTime(props.rowData.createTime) }}
      </el-descriptions-item>
      <el-descriptions-item
        label="修改人"
        width="100px">
        {{ props.rowData.updateUserRealName }}
      </el-descriptions-item>
      <el-descriptions-item
        label="上次修改时间"
        width="100px">
        {{ formatDateTime(props.rowData.updateTime) }}
      </el-descriptions-item>
      <el-descriptions-item
        label="启用状态"
        width="100px">
        {{ props.rowData.isEnable ? config.button.text.enable :
          config.button.text.stop }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">车次-附件信息</el-divider>
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item
        label="附件">
        <UploadFile
          ref="uploadRef"
          :show="false"
          :file-uuids="fileDataList" />
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">车次-采购信息</el-divider>
    <Table
      :data="nodeList"
      v-loading="tableLoading">
      <el-table-column
        prop="nodeTypeEnumName"
        label="类型"
        :resizable="false" />
      <el-table-column
        prop="nodeRelationName"
        label="名称"
        :resizable="false" />
      <el-table-column
        prop="firstPayDate"
        label="预付款日期"
        :resizable="false">
        <template #default="scope">
          {{ formatDate(scope.row.firstPayDate) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="endPayDate"
        label="尾款日期"
        :resizable="false">
        <template #default="scope">
          {{ formatDate(scope.row.endPayDate) }}
        </template>
      </el-table-column>
    </Table>

    <template #footer>
      <div>
        <el-button
          type="warning"
          v-permission="validateButtonPermission(route, 1)"
          v-if="appStore.isPhone"
          @click="editInfo">
          {{ config.button.text.edit }}
        </el-button>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import { useAppStore } from "@/stores/app"
import { formatDateTime, formatDate } from "@/common/utils/date";
import ApiTrainRepertoryNode from "@/api/modules/train-repertory-node"
import Table from "@/components/Table.vue"
import { validateButtonPermission } from "@/common/utils/validate";
import { useRoute } from "vue-router"
import ApiTrainRepertory from "@/api/modules/train-repertory"
import UploadFile from "@/components/UploadFile.vue"

// 路由
const route = useRoute()
const appStore = useAppStore()

const visibility = ref(false)
// 附件回显
const formData = ref({})
const fileDataList = ref([]);
// 节点信息
const nodeList = ref([])
const tableLoading = ref(false)

const props = defineProps(["rowData"])

// 通过车次库存id查询车次节点信息列表
const selectListByVehicleRepertoryId = async () => {
  tableLoading.value = true
  const data = await ApiTrainRepertoryNode.selectListByTrainRepertoryId({
    trainRepertoryId: props.rowData.id
  })
  nodeList.value = data.data
  tableLoading.value = false
}

// 通过车次库存id获取单个车次库存信息
const selectTrainRepertoryById = async () => {
  const data = await ApiTrainRepertory.selectTrainRepertoryById({
    id: props.rowData.id
  })
  formData.value = data.data
  fileDataList.value = []
  if (formData.value.fileDataJson && Array.isArray(JSON.parse(formData.value.fileDataJson))) {
    fileDataList.value = JSON.parse(formData.value.fileDataJson);
  }
}

watch(() => visibility.value, async (newVal) => {
  if (newVal) {
    await selectListByVehicleRepertoryId()
    await selectTrainRepertoryById()
  }
})

const emits = defineEmits(["editInfo"])
const editInfo = () => {
  visibility.value = false;
  emits("editInfo", props.rowData);
}

defineExpose({ visibility })
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  width: 142px;
}
</style>